/* MapPin.css */
.map-pin {
  width: 24px;
  height: 24px;
  background-color: var(--color-accent);
  border: 2px solid var(--color-white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.map-pin:hover {
  background-color: var(--color-primary);
  transform: rotate(-45deg) scale(1.2);
}

.map-pin--active {
  background-color: var(--color-primary);
  z-index: 100;
}